
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="css/swiper.css" />
    <link rel="stylesheet" href="css/mint.css">
</head>
<script src="js/serverUrl.js"></script>
<script src="js/vue.js"></script>
<script src="js/mint.js"></script>
<script src="js/moment.js"></script>
<style type="text/css">
        .examContainer{
            display: flex;
        }

        .examItem {
            width: 45vw;
            height: 23vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f0f0f0;
            margin-top: 10px;
            margin-left: 3vw;
            border-radius: 5px;
        }
        .examImage {
            height: 9vw;
            width: 9vw;
            margin-right: 4vw;
        }
        .examInfo {
            flex:1;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .examName{
            font-size: 5vw;
            font-weight: bold;
            color: white;
        }

        .examBrief{
            font-size: 2.5vw;
            color: white;
            margin-top: 1vw;
        }

        .pointContainer {
            display: flex;
            flex-direction: column;
            background-color: white;
            align-items: center;
            margin-top: 15px;
            padding-bottom: 6vw;
        }

        .userPhoto{
            width: 18vw;
            height: 18vw;
            margin-top: 4vw;
            margin-bottom: 2vw;
        }

        .rankInfoContainer{
            display: flex;
            flex-direction: row;
            width: 100vw;
            justify-content: space-between;
        }

        .rankInfoLabel {
            font-size: 3.5vw;
        }

        .pointItem{
            height: 17vw;
            width: 100vw;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 1px;
            background-color: white;
            justify-content: space-between;
        }

        .userInfo{
            display: flex;
            align-items: center;
        }

        .rankLabel {
            font-size: 4vw;
            margin-left: 7vw;
        }

        .rankPhoto{
            width: 11vw;
            height: 11vw;
            margin-left: 7vw;
        }

        .rankUserName{
            font-size: 4vw;
            margin-left: 5vw;
        }

        .rankValue{
            font-size: 4vw;
            margin-right: 6vw;
            color: #f44236;
        }
        .unitName{
            margin-right:4vw;
            font-size: 3vw;
            color:#25a6fa;
            text-align: center;
            border: 1px solid #25a6fa;
            border-radius: 5px;
            padding: 0.8vw;
            display: inline-block;
            width: 100px;
            word-break: break-all;
            white-space: normal;
        }
        .tabsContainer{
            width: 100%;
            height: 40px;
            padding:0;
            display: flex;
            justify-content: center;
            margin-top: 10px;
            align-items: center;
       }
          .tab{
          width: 30%;
          height: 35px;
          display:flex;
          justify-content: center;
          align-items: center;
          background-color: white;
          font-size: 14px;
          border: 1px solid red;
          color: red;
         }
     .active{
           background: red;
           color: white;
          }
      .disactive{
          background: white;
          color: red;
      }
    </style>
<body>
<div id="app">
    <div class="examContainer">
        <div class="examItem" style="background-color: #25a6fa;" @click="changeType(1)">
            <div class="examInfo">
                <div class="examName">个人企业</div>
                <div class="examBrief">个人在本企业排名</div>
            </div>
            <img class="examImage" src="img/grqy.png"/>
        </div>

        <div class="examItem" style="background-color: #feb62e;" @click="changeType(2)">
            <div class="examInfo">
                <div class="examName">个人集团</div>
                <div class="examBrief">个人在本集团排名</div>
            </div>
            <img class="examImage" src="img/grjt.png"/>
        </div>
    </div>
    <div class="examContainer">
        <div class="examItem" style="background-color: #fd7359;" @click="changeType(3)">
            <div class="examInfo">
                <div class="examName">部门企业</div>
                <div class="examBrief">部门在本企业排名</div>
            </div>
            <img class="examImage" src="img/bmqy.png"/>
        </div>
        <div class="examItem" style="background-color: #5bcba7;" @click="changeType(4)">
            <div class="examInfo">
                <div class="examName">企业集团</div>
                <div class="examBrief">企业在本集团排名</div>
            </div>
            <img class="examImage" src="img/qyjt.png"/>
        </div>
    </div>



    <div class="pointContainer">
        <img class="userPhoto" src="img/round_logo.png"/>
        <div v-if="type == 1 || type == 3" class="rankInfoLabel" style="margin-bottom: 2vw;">所在部门：{{pointRank.unitName}}</div>
        <div v-if="type == 2 || type == 4" class="rankInfoLabel" style="margin-bottom: 2vw;">所在公司：{{pointRank.unitName}}</div>
        <div class="rankInfoContainer">
            <div  v-if="type == 1 || type == 2"  class="rankInfoLabel" style="margin-left: 14vw;">{{rankName}}：{{pointRank.score}}</div>
            <div  v-if="type == 3 || type == 4"  class="rankInfoLabel" style="margin-left: 14vw;">{{rankName}}：{{pointRank.score.toFixed(2)}}</div>
            <div class="rankInfoLabel" style="margin-right: 16vw;">排名：{{pointRank.rank}}</div>
        </div>
    </div>
    <div class="tabsContainer">
        <div class="tab active"
             style="border-top-left-radius: 15px;border-bottom-left-radius: 15px;"
             :class="selected==1?'active':'disactive'"
             @click.stop="tabClick(1)">总排名</div>
        <div class="tab"
             :class="selected==2?'active':'disactive'"
             @click.stop="tabClick(2)">年度排名</div>
        <div class="tab"
             :class="selected==3?'active':'disactive'"
             style="border-top-right-radius: 15px;border-bottom-right-radius: 15px;"
             @click.stop="tabClick(3)">月度排名</div>
    </div>

    <div style="margin-top:10px;" v-for="item in pointRank.rankList" class="pointItem">
        <div class="userInfo">
            <div class="rankLabel">{{item.ranking}}</div>
            <img src="img/round_logo.png" class="rankPhoto" />
            <div class="rankUserName">{{item.showName}}</div>
        </div>
        <div v-if="type == 1 || type == 2" class="rankValue"> <span class="unitName" v-if="item.unitName !=null">{{item.unitName}}</span> {{item.score}}</div>
        <div v-if="type == 3 || type == 4" class="rankValue"> <span class="unitName" v-if="item.unitName !=null">{{item.unitName}}</span>{{item.score.toFixed(2)}}</div>
    </div>
</div>
</body>

<script type="text/javascript">
            var app = new Vue({
              el: '#app',
              data: {
                type: 1,
                selected:1,
                rankName: "我的积分",
                pointRank :{
                },
                  },
              created() {
                window.getPointRank = this.getPointRank
                window.fresh = this.fresh
                window.loadMore = this.loadMore
                window.addPointRank = this.addPointRank
              },
              methods:{
                  fresh(){
                    changeType(this.type)
                  },
                  finishLoadMore(){
                     window.jinneng.finishLoadMore()
                  },
                  getPointRank (pointRank){
                    this.pointRank = pointRank
                    if(pointRank.rankList.length<10){
                        this.finishLoadMore()
                    }
                  },
                  addPointRank (pointRank){
                      this.pointRank.rankList = this.pointRank.rankList.concat(pointRank.rankList)
                      if(pointRank.rankList.length<10){
                        this.finishLoadMore()
                    }
                  },

                  changeType(type){
                      this.type = type
                      if(type == 1 || type == 2){
                        this.rankName = "我的积分"
                      }
                      if(type == 3){
                          this.rankName = "本部门平均积分"
                      }

                      if(type == 4){
                          this.rankName = "本企业平均积分"
                      }
                       let params = {
                            type: this.type*10 +   this.selected
                        }
                       WebViewJavascriptBridge.callHandler('changeType',params,function(response) {
                                              
                        });
                  },
                    tabClick(index) {
                      this.selected = index
                      let params = {
                          type: this.type*10 + index
                      }
                     WebViewJavascriptBridge.callHandler('changeType',params,function(response) {
                                            
                      });
                  }
              }
            })
        </script>
</html>
